<template>
    <div>
        <head-view class="headerView" headLeft headRight>
            <template #headLeft>
                <div class="pl-20 fs-20 bold">成才服务平台</div>
            </template>
            <template #headRight>
                <div class="fs-15" @click="goBack">返回</div>
            </template>
        </head-view>
        <div class="fc-ac-jc mainView" style="height: calc(100vh - 90.13px)">
            <p class="pb-50 bold fs-15">请选择想吗反反复复付{{ province }}</p>
            <div class="w-20">
                <form-view
                    :list="formList"
                    :size="'large'"
                    :rightButton="false"
                    @getFromValue="goLogin"
                    @selectValue="selectValue"
                ></form-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from "@/store/userStore";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "./index";
import { tabList } from "../volunteer/data";
const userStore = useUserStore();
const router = useRouter();
const province = ref("福建");
const formList = ref([
    {
        id: 1,
        prefix: true,
        type: "",
        label: "账号",
        model: "",
        prop: "account",
        suffixIcon: "",
        rules: [
            {
                required: true,
                message: "请输入账号",
                trigger: ["blur", "change"],
            },
            {
                pattern: /^[a-zA-Z]{5,20}$/,
                message: "账号格式不正确",
                trigger: "blur",
            },
        ],
        formType: "input",
        placeholder: "请输入英文账户名",
        list: [],
    },
    {
        id: 2,
        prefix: true,
        type: "password",
        label: "密码",
        model: "",
        prop: "password",
        suffixIcon: "",
        rules: [
            {
                required: true,
                message: "请输入密码",
                trigger: ["blur", "change"],
            },
            {
                pattern: /^[a-zA-Z0-9]{6,20}$/,
                message: "格式不正确(含字母数字最少6位)",
                trigger: "blur",
            },
        ],
        formType: "input",
        placeholder: "请输入登录密码",
        list: [],
    },
    {
        id: 3,
        prefix: true,
        type: "",
        label: "省份",
        model: "福建",
        prop: "province",
        rules: [],
        suffixIcon: "CaretBottom",
        formType: "select",
        placeholder: "请选择省份",
        list: [
            {
                label: "福建",
                value: "福建",
            },
            {
                label: "浙江",
                value: "浙江",
            },
        ],
    },
]);
const goLogin = async (submit) => {
    const res = await login(submit);
    const getcrowd = (val) => {
        switch (val) {
            case 1:
                return "管理员";
            case 2:
                return "审核员";
            case 3:
                return "填报师";
            case 4:
                return "助理";
            default:
                return ""
        }
    };
    let tab= tabList.filter(
        (item) =>
            item.company.includes(res.company_id) &&
            item.roles.includes(getcrowd(res.crowd))
    );
    router.replace({ path: tab[0].path });
    let newRes = {
        ...res,
        crowd: getcrowd(res.crowd),
        province:province.value
    };
    userStore.tabList=tab
    userStore.user = newRes;
    userStore.isLogin = true;
};
const selectValue = (val) => {
    province.value = val;
};
const goBack = () => {
    router.replace({ path: "/" });
};
</script>
<style scoped lang="scss">
.headerView {
    background: url(@/assets/header.jpg) no-repeat;
    background-size: cover;
    color: #fff;
    padding: 20px 100px;
}
.mainView {
    margin: 0 auto;
    .listItem {
        padding: 6rem 7rem;
        border: 1px solid #4b42b7;
        white-space: nowrap;
        &:hover {
            background: #4b42b7;
            color: #fff;
        }
    }
}
</style>
